<template>
    <div class="wrapper">
        <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="item in swiperList" :key="item.id"><img class="swiper-img" :src="item.imgUrl"/></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>
<script>
    // import {Swiper,SwiperSide,directive} from 'vue-awesome-swiper'
    import 'swiper/css/swiper.css'
    export default{
        name:"HomeSwiper",
        props:["swiperList"],
        data(){
            return{
                swiperOptions: {
                    pagination: {
                        el: '.swiper-pagination',
                },
                loop:true,
                autoplay:{
                    delay:1000,
                    disableOnInteraction:false
                }
            },
            // swiperList:[{
            //         id:'0001',
            //         imgUrl:require("@/assets/images/swiperimg1.jpg")
            //     },{
            //         id:'0002',
            //         imgUrl:require("@/assets/images/swiperimg2.jpg")
            //     },{
            //         id:'0003',
            //         imgUrl:require("@/assets/images/swiperimg3.jpg")
            //     },{
            //         id:'0004',
            //         imgUrl:require("@/assets/images/swiperimg4.jpg")
            //     }]
        }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    },
    mounted() {
      console.log('Current Swiper instance object', this.swiper)
      this.swiper.slideTo(3, 1000, false)
      console.log(this.swiperList)
    }
    }
</script>
<style scoped lang="stylus">
.wrapper >>> .swiper-pagination-bullet
            background: #fff !important
    .wrapper
        overflow: hidden
        width: 100%  
        // height: 0
        padding-botton: 31.25%
        background-color: #eee
        .swiper-img
            width: 100%
        
</style>